﻿@{
    ViewData["Title"] = "Index";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../echarts.js"></script>
    <link rel="stylesheet" href="~/Content/bootstrap-theme.css" media="all"/>
    <link rel="stylesheet" href="~/layui/css/layui.css">
    <link rel="stylesheet" href="~/layer/skin/layer.css">
</head>
<body>

<div style="width: 1500px; height: 50px; margin-top: 10px;margin-left: 100px">
    <div id="NumberOfEmployees" style=" width: 300px; height: 100px; margin-left: 100px;float: left; box-shadow: 0 3px 18px rgba(100, 0, 0, .5);border-radius:10px">
        <div style="margin-left: 10px;margin-top: 5px">
            <i class="layui-icon" style="font-size: 43px; color:#fccd41;">&#xe60c;</i>  
            <span style="font-size: 43px; color: #fccd41;" id="InductionCount">2</span>
            <span style="margin-left: 70px; color: #99999c" >入职人数</span>
        </div>
        <div>
            <span style=" color: #99999c"> <hr /></span> 
            <span style="color: #99999c; margin-left: 10px;float: left">查看详情</span>
            <i style="float: right; margin-right: 10px;color: #99999c" class="layui-icon">&#xe615;</i>
        </div>
    </div>

    <div id="NumberOfSeparations" style="width: 300px; height: 100px; margin-left: 150px; float: left ; box-shadow: 0 3px 18px rgba(100, 0, 0, .5);border-radius:10px">
        <div style="margin-left: 10px;margin-top: 5px">
            <i class="layui-icon" style="font-size: 43px; color: #2adeb1;">&#xe756;</i>  
            <span style="font-size: 43px; color: #2adeb1;" id="SeparationsCount">2</span>
            <span style="margin-left: 70px; color: #99999c">离职人数</span>
        </div>
        <div>
            <span style=" color: #99999c"><hr /></span> 
            <span style="color: #99999c; margin-left: 10px;float: left">查看详情</span>
            <i style="float: right; margin-right: 10px;color: #99999c" class="layui-icon">&#xe615;</i>
        </div>
    </div>

    <div id="TotalNumberOfEmployees" style="background-color: #58a3f7; width: 300px; height: 100px; margin-left: 150px; float: left; box-shadow: 0 3px 18px rgba(100, 0, 0, .5);border-radius:10px">
        <span id="AllCount" style="font-size: 43px; color: #ffffff;margin-top:30px; margin-left: 60px;">
            200000
        </span>
        <br/>
        <hr />
        <span style="font-size: 15px; color: #ffffff;margin-top:30px; margin-left: 60px;">
            员工总人数
        </span>
    </div>
</div>
<div style="width: 1500px;margin-left: 100px">
    <div id="ProcessDiagram" style=" width: 500px; height: 300px; margin-left: 100px; margin-top: 20px; float: left; box-shadow: 0 3px 18px rgba(100, 0, 0, .5); border-radius: 10px">
        <br/>
        <span style="font-size: 25px; color: #676767; margin-top: 50px; margin-left: 30px;">
            员工总人数
        </span>
        <br/>
        <table style="margin-left: 50px;margin-top: 50px">
            <tr>
                <td>18-24岁&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <br/> <br/>
                </td>
                <td>
                    <div style="width: 250px" lay-filter="dome" class="layui-progress layui-progress-big" lay-showPercent="yes">
                        <div id="age1" class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
                    </div><br/>
                </td>
            </tr>
           
            <tr>
                <td>25-29岁 <br/> <br/></td>
                <td>
                    <div style="width: 250px" lay-filter="dome" class="layui-progress layui-progress-big" lay-showPercent="yes">
                        <div id="age2" class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
                    </div> <br/>

                </td>
            </tr>
            
            <tr>
                <td>30-39岁  <br/><br/></td>
                <td>
                    <div style="width: 250px" lay-filter="dome" class="layui-progress layui-progress-big" lay-showPercent="yes">
                        <div id="age3" class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
                    </div> <br/>
                </td>
            </tr>
            <tr>
                <td>40-49岁  <br/><br/></td>
                <td>
                    <div style="width: 250px" lay-filter="dome" class="layui-progress layui-progress-big" lay-showPercent="yes">
                        <div id="age4" class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
                    </div> <br/>
                </td>
            </tr>
            <tr>
                <td>50岁以上 <br/> <br/></td>
                <td>
                    <div style="width: 250px" lay-filter="dome" class="layui-progress layui-progress-big" lay-showPercent="yes">
                        <div  id="age5" class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
                    </div> <br/>
                </td>
            </tr>
        </table>
      
    </div>

    <div id="PieChart" style="width: 500px; height: 300px; margin-left: 200px; margin-top: 20px; float: left; box-shadow: 0 3px 18px rgba(100, 0, 0, .5); border-radius: 10px">
        <br/>
        <span style="font-size: 25px; color: #676767; margin-top: 50px; margin-left: 30px;">
            工龄比
        </span>
        <div id="PieChartINfo" style="width: 500px; height: 250px;"></div>
    </div>
</div>

<div style="width: 1500px;margin-left: 100px">
    <div id="StatisticalChart" style="width: 500px; height: 300px; margin-left: 100px; margin-top: 20px; float: left; box-shadow: 0 3px 18px rgba(100, 0, 0, .5); border-radius: 10px">
        <div id="DepartmentInfo" style="width: 500px; height: 270px;"></div>
        
        <span style="font-size: 25px; color: #676767; margin-top: 50px; margin-left: 180px;">
            部门人数
        </span>
    </div>

    <div id="BrokenLine" style=" width: 500px; height: 300px; margin-left: 200px; margin-top: 20px; float: left; box-shadow: 0 3px 18px rgba(100, 0, 0, .5); border-radius: 10px">
        <div id="QuitInfo" style="width: 500px; height: 270px;"></div>
        
        <span style="font-size: 25px; color: #676767; margin-top: 50px; margin-left: 180px;">
            离职人数
        </span>

    </div>
</div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script  src="~/layui/layui.js"></script>
<script  src="~/layui/modules/element.js"></script>
<script  src="~/layer/layer.js"></script>
<script type="text/javascript">

    //文档准备就绪函数
    $(function() {
        NumberOfSeparations();
        NumberOfEmployees();
        NumberOfDepartments();
        NumberOfSeparationsInfo();
        TotalNumber();
        AgeRatio();
        SeniorityRatio();
    });

    layui.use('element', function() {
         element = layui.element;
    });

    //离职人数
    function NumberOfSeparationsInfo() {
        $.get("/PersonnelMatters/DimissionCount",
            function(res) {
                $("#SeparationsCount").text(res);
            });
    }
    //入职人数
    function NumberOfEmployees() {
        $.get("/PersonnelMatters/InductionCount",
            function(res) {
                $("#InductionCount").text(res);
            });
    }
    //总人数
    function TotalNumber() {
        $.get("/PersonnelMatters/Headcount",
            function(res) {
                $("#AllCount").text(res);
            });
    }
    
    //工龄比
    function SeniorityRatio() {
        var chartDom = document.getElementById('PieChartINfo');
        var myChart = echarts.init(chartDom);
        var option;
        $.get("/PersonnelMatters/GeySeniorityRatio",
            function(res) {
                var one = 0;
                var two = 0;
                var three = 0;
                var four = 0;
                res.forEach(a => {
                    if (a.age >= 1 && a.age <= 3) {
                        one += a.count;
                    }
                    if (a.age >= 4 && a.age <= 6) {
                        two += a.count;
                    }
                    if (a.age >= 7 && a.age <= 9) {
                        three += a.count;
                    }
                    if (a.age >= 10 ) {
                        four += a.count;
                    }
                });
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: 'bottom'
                    },
                    series: [
                        {
                            name: '工龄',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: one, name: '1-3年' },
                                { value: two, name: '4-6年' },
                                { value: three, name: '7-9' },
                                { value: four, name: '10年以上' }
                            ]
                           
                        }
                    ]
                };
                option && myChart.setOption(option);
            });
    }

    //年龄比
    function AgeRatio() {
        $.get("/PersonnelMatters/GeyAgeRatios",
            function(res) {
                var one = 0;
                var two = 0;
                var three = 0;
                var four = 0;
                var five = 0;
                var sumCount = 0;
                res.forEach(a => {
                    sumCount += a.count;
                    if (a.age >= 18 && a.age <= 24) {
                        one += a.count;
                    }
                    if (a.age >= 25 && a.age <= 29) {
                        two += a.count;
                    }
                    if (a.age >= 30 && a.age <= 39) {
                        three += a.count;
                    }
                    if (a.age >= 40 && a.age <= 49) {
                        four += a.count;
                    }
                    if (a.age >= 50 ) {
                        five += a.count;
                    }
                });
                one = Math.round(one/sumCount *100) ;
                two = Math.round(two/sumCount *100) ;
                three = Math.round(three /sumCount* 100) ;
                four = Math.round(four/sumCount * 100) ;
                five = Math.round(five/sumCount * 100) ;
                $("#age1").attr("lay-percent",  one+ "%");
                $("#age2").attr("lay-percent", two+ "%");
                $("#age3").attr("lay-percent", three+ "%");
                $("#age4").attr("lay-percent", four+ "%");
                $("#age5").attr("lay-percent", five + "%");
                element.init();
            });
    }

    //部门人数
    function NumberOfDepartments() {
        var chartDom = document.getElementById('DepartmentInfo');
        var myChart = echarts.init(chartDom);
        var option;
        $.get("/PersonnelMatters/GeyDepartment",
            function(res) {
                var name = [];
                var count = [];

                res.forEach(a => {
                    name.push(a.name);
                    count.push(a.count);
                });

                option = {
                    xAxis: {
                        type: 'category',
                        data: name
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: count,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            });
    }

    //离职人数
    function NumberOfSeparations() {
        var chartDom = document.getElementById('QuitInfo');
        var myChart = echarts.init(chartDom);
        var option;
        $.get("/PersonnelMatters/GetNumberOfSeparations",
            function(res) {
                var age = [];
                var count = [];

                res.forEach(a => {
                    age.push(a.age);
                    count.push(a.count);
                });
                console.log(res);
                console.log(age);
                console.log(count);
                option = {
                    xAxis: {
                        type: 'category',
                        data: age
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: count,
                            type: 'line'
                        }
                    ]
                };
                option && myChart.setOption(option);
            });
    }

</script>
</body>
</html>